<template>
  <div class="login">
    <!-- 头部logo区域 -->
    <header>
      <div class="logo">
        <img src="@/assets/logo.png" alt />
      </div>
    </header>
    <!-- form表单，登录&注册区域 -->
    <van-tabs>
      <van-tab title="登录">
        <van-form @submit="onlogin">
          <van-field
            v-model="user.username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="user.password"
            type="text"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>

      <van-tab title="注册"
        ><van-form @submit="onregister">
          <van-field
            v-model="user.username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="user.password"
            type="text"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field name="uploader" label="上传头像">
            <template #input>
              <van-uploader v-model="fileList" :after-read="afterRead" />
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { uploadRequest, registerRequest,loginRequest } from "@/api/users";
import { Toast } from "vant";

export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: "",
        url: "",
      },
      fileList: [],
    };
  },
  methods: {
    // 用户登录
    async onlogin() {
      const data=await loginRequest(this.user.username,this.user.password)
      if(data){
        console.log(data);
        localStorage.setItem('USER',JSON.stringify(data))
        Toast.success('登录成功')
        this.$router.replace('/mine')
      }
    },
    // 注册用户
    async onregister() {
      try {
        const info = await registerRequest(
          this.user.username,
          this.user.password,
          this.user.url
        );
        if (info) {
          Toast.success("注册成功");
        } else {
          Toast.fail("注册失败");
        }
      } catch (error) {
        Toast.fail(error)
      }
    },
    async afterRead(file) {
      console.log(file);

      let formdata = new FormData();
      formdata.append("headerImg", file.file);
      try {
        const data = await uploadRequest(formdata);
        // console.log(data);
        this.user.url = data.url;
        console.log(this.user.url);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
header {
  height: 170px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: url("@/assets/bg.png") no-repeat;
  .logo {
    width: 240px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.van-button {
  background: #86b42b;
}
</style>
